<script src="../../../../../../protects/guangxifupin-front/src/containers/App/index.jsx"></script>
<template>
  <div class="padding-middle">
    <el-card :body-style="{padding:'0px'}">
      <div class="search">
        <div class="input">
          <el-input v-model="input" size="small" placeholder="请输入内容" style="width: 300px;height: 20px;margin-right: 15px"/>
          <el-button style="margin-left: 15px" plain size="small" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </div>
        <div class="edit">
          <router-link to="/user/distributionCourse/edit"><el-button type="success" size="small">添加课程分类</el-button></router-link>
        </div>
      </div>
      <el-table
        :data="items"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          prop="cover"
          label="序号"
          width="150"/>
        <el-table-column
          prop="title"
          label="用户姓名"/>
        <el-table-column
          prop="content"
          label="联系电话"/>
        <el-table-column
          prop="type"
          label="课程类别"/>
        <el-table-column
          prop="type"
          label="购买时间"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small">查看</el-button>-->
            <router-link :to="'/article/edit/' + scope.row.id"><el-button size="small" type="text">编辑</el-button></router-link>
            <el-button size="small" type="text" @click="deleteArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="page" :page-size="10" :total="total" background layout="prev, pager, next"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      page: 1,
      total: 0,
      input:'',
      items: [],
      option1:'',
      option2:'',
      options1: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      options2:[]
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() {

    },
    clickSearch() {
      alert('查询')
    },
    deleteArticle() {}
  }
}
</script>

<style lang="scss" scoped>
  .cover {
    width: 100px;
    height: 75px;
    box-shadow: 2px 2px 2px #eee;
  }
  .search{
    background-color: #00b3bf;
    height: 60px;
    display: flex;
    padding: 15px 10px;
    box-sizing: border-box;
    .input{
      flex: 8;
    }
    .edit{
      flex: 2;
      text-align: right;
      padding-right: 10px;
    }
  }
</style>
